<template>
    <div  class="capture">
        <h1 style="margin-left:20px;margin-top:80px;">人脸抓拍</h1>

        <div class="view-box-content">
            <div v-for="(item, index) in face" :key="index" class="v-b-c-item-box">
                <div class="v-b-c-item">
                    <div class="info-c" style="margin-top: 10px">
                        <div class="img-b">
                            <el-image
                                style="height: 100%"
                                :src="item.image"
                                :preview-src-list="new Array(item.image)"
                                fit="scale-down"
                            />
                        </div>

                        <div class="img-c">
                            <el-image
                                style="height:100%"
                                :src="item.face_image"
                                :preview-src-list="new Array(item.face_image)"
                                fit="scale-down"
                            />
                        </div>
                        <div class="information">
                            <p>姓名：{{item.name}}</p>
                            <p>年龄：{{item.age}}</p>
                            <p>性别：{{item.idcard===1?"女":"男"}}</p>
                        </div>
                       
                        <div
                            class="text-content"
                            style="width: 60%;position: relative;padding: 0px 5px;"
                        >
                            
                            <div
                                style="text-align: right;position: absolute;bottom: 10px;right: 10px;"
                            >{{ item.location_name}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="display:flex;justify-content: flex-end;padding: 20px;background: rgba(0,0,0,0)">
            <el-pagination
                :current-page.sync="searchParam.pageNum"
                :page-size="searchParam.pageSize"
                layout="prev, pager, next"
                :total="total"
                @current-change="handleCurrentChange"
                style="color: black;"
            />
        </div>
    </div>
</template>

<script>

import request from '@/utils/request'

export default {
    name: "alarm",
    data() {
        return {
            faceList: [],
            searchParam: {pageNum: 1, pageSize: 9, conditions: [
                {key: 'locationId',value: '', method: 'eq'},
                {key: 'createDate',value: '', method: 'ge'},
                {key: 'createDate',value: '', method: 'le'}
            ]},
            locationList: [],
            total: 0,
            statistics: {},
            face:{}
        };
    },
    created() {
    },
    mounted(){
        this.getAlarmList()
        this.getLocationList()
        this.getStatistics()
        this.getface()
    },
    computed: {
    },
    methods: {
         getface(){
            request({
                url: '/rest/faceCaptured/queryList',
                method: 'post',
                data: this.searchParam
            }).then(res => {
                if(res.status){
                    // console.log(res.data.records[0].image)
                    // console.log(res.data.records)
                    this.total = res.data.total
                    this.face  =res.data.records
                    
                }else{
                    this.$message.error(res.message);
                    this.face = res.data
                }
            }).catch((e) => {
                console.error(e)
                this.$message.error("网络错误!");
            });
        },
        getAlarmList(){
            request({
                url: '/rest/alarm/queryList',
                method: 'post',
                data: this.searchParam
            }).then(res => {
                if(res.status){
                    this.alarmList = res.data.records
                    this.total = res.data.total
                }else{
                    this.$message.error(res.message);
                }
            }).catch((e) => {
                console.error(e)
                this.$message.error("网络错误!");
            });
        },
        getLocationList(){
            request({
                url: '/rest/location/queryList',
                method: 'post',
                data: {pageNum: 1, pageSize: 100, conditions: [{key: "status", value: 0, method: "ge"}]}
            }).then(res => {
                if(res.status){
                    this.locationList = res.data.records
                }else{
                    this.$message.error(res.message);
                }
            }).catch((e) => {
                console.error(e)
                this.$message.error("网络错误!");
            });
        },
        handleCurrentChange(){
            this.getAlarmList()
        },
        closeAlarm(item){
            item.status = 1
            request({
                url: '/rest/alarm/update/' + item.id + '/' + item.deviceId,
                method: 'post',
                data: item
            }).then(res => {
                if(res.status){
                    this.getAlarmList()
                }else{
                    this.$message.error(res.message);
                }
            }).catch((e) => {
                console.error(e)
                this.$message.error("网络错误!");
            });
        },
        closeAlarmAll(){
            request({
                url: '/rest/alarm/closeAll',
                method: 'get',
            }).then(res => {
                if(res.status){
                    this.getAlarmList()
                }else{
                    this.$message.error(res.message);
                }
            }).catch((e) => {
                console.error(e)
                this.$message.error("网络错误!");
            });
        },
        deleteItem(item) {
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
            .then(() => {
                request({
                    url: '/rest/alarm/delete/' + item.id + '/' + item.deviceId,
                    method: 'get',
                }).then(res => {
                    if(res.status){
                        this.getAlarmList()
                    }else{
                        this.$message.error(res.message);
                    }
                }).catch((e) => {
                    console.error(e)
                    this.$message.error("网络错误!");
                });
            })
            .catch(() => {});
        },
        getStatistics(){
            request({
                url: '/rest/alarm/statistics',
                method: 'get',
            }).then(res => {
                if(res.status){
                    this.statistics = res.data
                }else{
                    this.$message.error(res.message);
                }
            }).catch((e) => {
                console.error(e)
                this.$message.error("网络错误!");
            });
        }
    }
};
</script>
<style lang="scss" scoped>
.capture {
    .el-pagination {
        background: rgba(1, 255, 255, 0);
        border-width: 0;
    }
    .el-pagination button:disabled {
        background: rgba(1, 255, 255, 0);
        cursor: not-allowed;
    }
    .el-pager li.active {
        cursor: default;
    }
    .view-box-content {
        display: flex;
        // flex-wrap: wrap;
        // justify-content: space-between;
        .v-b-c-item-box {
            width: 33%;
            box-sizing: border-box;
            min-width: 450px;
            padding: 8px;
        }
        .v-b-c-item {
            // margin-left: 10px;
            .v-b-c-title {
                background: #716f3a;
                width: 100%;
                box-sizing: border-box;
                height: 46px;
                line-height: 46px;
                padding: 2px 0 0 10px;
                font-size: 18px;
                position: relative;
            }
            .info-c {
                display: flex;
                border: 2px solid #01ff95;
            }
            .img-b {
                width: 40%;
                // border: 3px solid #435671;
                overflow: hidden;
                height: 130px;
                background: rgba(1, 255, 255, 0.2);
                text-align: center;
                img {
                    height: 100%;
                }
            }
            .img-c {
                width: 40%;
                padding: 5px;
                // border: 3px solid #435671;
                // overflow: hidden;
                height: 130px;
                margin-left: 20px;
                text-align: center;
                img {
                    height: 100%;
                }
            }
            .text-content {
                li {
                    line-height: 25px;
                    height: 25px;
                }
            }
        }
    }
}
.information{
    width: 200px;
    margin-left: 50px;
}
</style>